<template>
  <div class="notice-detail">
    <!-- 返回按钮 -->
    <div class="mb-4">
      <el-button type="text" @click="goBack">
        <el-icon>
          <ArrowLeft />
        </el-icon>
        返回通知列表
      </el-button>
    </div>

    <!-- 通知详情卡片 -->
    <el-card class="shadow-sm">
      <!-- 标题区域 -->
      <div class="border-b pb-4 mb-4">
        <h1 class="text-2xl font-bold text-gray-800 mb-2">{{ notice.title }}</h1>
        <div class="flex items-center text-sm text-gray-500">
          <span>{{ formatDate(notice.publishTime) }}</span>
          <span class="mx-2">|</span>
          <span>{{ notice.buildingName }}</span>
          <span class="mx-2">|</span>
          <!-- <el-badge :value="notice.isRead ? '已读' : '未读'" :type="notice.isRead ? 'success' : 'info'" /> -->
        </div>
      </div>

      <!-- 通知内容 -->
      <div class="notice-content text-gray-700 leading-relaxed">
        <div v-html="notice.content"></div>
      </div>

      <!-- 附件区域（如果有附件） -->
      <div v-if="notice.attachments && notice.attachments.length > 0" class="mt-6 pt-4 border-t">
        <h3 class="font-medium text-gray-800 mb-3">附件：</h3>
        <div class="space-y-2">
          <el-link 
            v-for="(attachment, index) in notice.attachments" 
            :key="index" 
            type="primary"
            @click="downloadAttachment(attachment)"
          >
            <el-icon>
              <Document />
            </el-icon>
            {{ attachment.fileName }}
          </el-link>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getNoticeDetail } from '@/api/student';
import { ArrowLeft, Document } from '@element-plus/icons-vue';


const route = useRoute();
const router = useRouter();


// 通知详情数据
const notice = ref({});
const isLoading = ref(false);
const error = ref('');

// 从路由参数获取通知ID
const noticeId = computed(() => route.params.id);

// 日期格式化函数
const formatDate = (dateStr) => {
  if (!dateStr) return '';
  return new Date(dateStr).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  });
};

// 获取通知详情
const fetchNoticeDetail = async () => {
  isLoading.value = true;
  error.value = '';
  
  try {
    const response = await getNoticeDetail({
      id: noticeId.value,
    });
    
    if (response.code === 0) {
      notice.value = response.data;
      // 标记通知为已读（如果需要）
      if (!notice.value.isRead) {
        markNoticeAsRead(noticeId.value);
      }
    } else {
      error.value = response.message || '获取通知详情失败';
    }
  } catch (err) {
    error.value = '网络错误，请重试';
    console.error('获取通知详情失败:', err);
  } finally {
    isLoading.value = false;
  }
};

// 标记通知为已读（可选）
const markNoticeAsRead = async (id) => {
  try {
    await getNoticeDetail({ id, read: true });
    // 更新本地状态
    notice.value.isRead = true;
  } catch (err) {
    console.error('标记通知为已读失败:', err);
  }
};

// 下载附件（示例）
const downloadAttachment = (attachment) => {
  // 实际项目中可能需要调用后端下载接口
  window.open(attachment.url, '_blank');
};

// 返回列表页
const goBack = () => {
  router.go(-1);
};

// 生命周期钩子
onMounted(() => {
  if (noticeId.value) {
    fetchNoticeDetail();
  }
});
</script>

<style scoped>
.notice-detail {
  padding: 20px;
}

.notice-content {
  min-height: 300px;
  line-height: 1.8;
}

.notice-content img {
  max-width: 100%;
  height: auto;
  margin: 10px 0;
}
</style>